<template>
  <x-layout bg-color="#f4f4f2">
    <template #scroll>
      <div class="p-[30rpx_40rpx] flex flex-col gap-20rpx">
        <xCalendar
          @monthChange="monthChange"
          @change="change"
          ref="calendarRef"
          v-model="today"
        />
        <div class="border-rd-12px bg-#fff color-#010101 p-30rpx ">
          <div class="mb-20rpx font-700">
            {{ todayComputed }}
          </div>
          <div class="color-#979797 text-28 text-p">
            {{ content || '无记录' }}
          </div>
        </div>
        <div @click="openFitness" class="flex justify-center border-rd-50% items-center fixed right-60rpx bottom-140rpx w-100rpx h-100rpx bg-#1989fa">
          <wd-icon name="add" color="#fff" size="22px" />
        </div>
        <wd-popup v-model="show">
          <div class="w-550rpx">
            <div class="flex mb-30rpx justify-between p-[0_0_20rpx] items-center" style="border-bottom: 1px solid #f1f1f1;">
              <div class="text-36rpx">
                打卡记录
              </div>
              <div class="color-#010101">
                {{ todayComputed }}
              </div>
            </div>
            <wd-textarea custom-textarea-class="bg-#e6e6e6" v-model="textValue" placeholder="写点什么吧~" />
            <div class="flex justify-center">
              <div @click="confirm" class="mt-50rpx w-400rpx text-center border-rd-12px bg-#01ced1 color-#00070f py-30rpx">
                确定
              </div>
            </div>
          </div>
        </wd-popup>
      </div>
    </template>
  </x-layout>
</template>

<script setup>
import xCalendar from '@/components/x-calendar.vue'
import dayjs from 'dayjs'
import { nextTick, onMounted, computed, ref } from 'vue'

const today = ref(new Date())

const calendarRef = ref(null)

const textValue = ref('')

const show = ref(false)

const content = ref('')

const change = (item) => {
  content.value = item?.content
}

const historyFitnessList = ref([])

onMounted(async () => {
  await nextTick()
  historyFitnessList.value = uni.getStorageSync('historyFitnessList') || []
  calendarRef.value.setDataStatus(historyFitnessList.value)
})

const monthChange = () => {
  calendarRef.value.setDataStatus(historyFitnessList.value)
}

const confirm = () => {
  historyFitnessList.value.push({
    time: today.value,
    content: textValue.value
  })
  uni.setStorageSync('historyFitnessList', historyFitnessList.value)
  show.value = false
  calendarRef.value.setDataStatus(historyFitnessList.value)
}

const todayComputed = computed(() => {
  return dayjs(today.value).format('YYYY年MM月DD日')
})

const openFitness = () => {
  show.value = true
}
</script>

<style lang="scss" scoped>
:deep(.wd-textarea) {
  padding: 0 !important;
}
:deep(.wd-textarea__value) {
  padding: 20rpx !important;
  border-radius: 12px !important;
  background-color: #e6e6e6 !important;
}
:deep(.wd-popup) {
  padding: 40rpx !important;
  border-radius: 12px !important;
}
.text-p {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-line;
}
</style>
